<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>搜索功能</title>
  <link rel="stylesheet" href="https://www.jq22.com/jquery/bootstrap-4.2.1.css">
  <style>
    .content1 {
      width: 90%;
      height: 600px;
text-align: center;
      display: inline-block;
      margin-top: 20px;
      margin-left: 50px;
    }

    .content2 {
      width: 600px;
      height: 600px;
      display: inline-block;

      margin-top: 50px;
      margin-left: 100px;

    }



    #lin {
      margin: 20px 0;
      height: 30px;
      padding: 5px;
      box-sizing: border-box;
    }

    .names {
      width: 300px;
      margin-bottom: 30px;
    }
    .content3 {
      margin-top: 50px;
      margin-left: 100px;
      
    }
    .content3 ul {
      padding-left: 0;
      margin-bottom: 100px;
    }
    .content3 ul li{
      list-style: none;
    }
  </style>
</head>

<body>



  <div class="content1">
    <!-- <input type="text" id="lin" placeholder="请输入需要搜索的内容"> -->
    <input type="text" class="form-control names" id="lin" placeholder="请输入需要搜索的内容">

    <table class="table table-striped table-bordered" id="table-1">
      <thead class="thead-dark">
        <tr>
          <th>学号</th>
          <th>姓名</th>
          <th>性别</th>
          <th>年龄</th>
          <th>学院</th>
          <th>专业</th>
          <th>班级</th>
          <th>电话</th>
          <th>地址</th>
          <th>备注</th>
        </tr>
      </thead>

      <tbody>

        <tr>
        <td>20230118</td>
          <td>歆瑶</td>
          <td>女</td>
          <td>18</td>
          <td>长江大学</td>
          <td>体育教育</td>
          <td>116</td>
          <td>185****4586</td>
          <td>武汉</td>
          <td></td>
        </tr>
        <tr>
            <td>20230119</td>
            <td>佩儒</td>
            <td>男</td>
            <td>23</td>
            <td>湖北师范大学</td>
            <td>播音与主持艺术</td>
            <td>118</td>
            <td>185****4556</td>
            <td>武汉</td>
            <td></td>
        </tr>
        <tr>
            <td>20230120</td>
            <td>兰溪</td>
            <td>男</td>
            <td>19</td>
            <td>武汉东湖学院</td>
            <td>学前教育</td>
            <td>118</td>
            <td>185****4589</td>
            <td>武汉</td>
            <td></td>
        </tr>
        <tr>
            <td>20230121</td>
            <td>百成</td>
            <td>男</td>
            <td>19</td>
            <td>湖北中医药大学</td>
            <td>广播电视编导</td>
            <td>118</td>
            <td>139****4586</td>
            <td>武汉</td>
            <td></td>
        </tr>
        <tr>
            <td>20230122</td>
            <td>理菡</td>
            <td>女</td>
            <td>18</td>
            <td>汉江师范学院</td>
            <td>体育教育</td>
            <td>118</td>
            <td>185****4586</td>
            <td>襄阳</td>
            <td>休学</td>
        </tr>
        <tr>
            <td>20230123</td>
            <td>萱妍</td>
            <td>女</td>
            <td>18</td>
            <td>长江大学</td>
            <td>数字媒体艺术</td>
            <td>118</td>
            <td>185****4568</td>
            <td>荆州</td>
            <td></td>
        </tr>
        <tr>
            <td>20230124</td>
            <td>语汐</td>
            <td>女</td>
            <td>18</td>
            <td>湖北民族大学</td>
            <td>数字媒体艺术</td>
            <td>118</td>
            <td>185****5257</td>
            <td>武汉</td>
            <td></td>
        </tr>
        <tr>
            <td>20230125</td>
            <td>林兵</td>
            <td>男</td>
            <td>18</td>
            <td>长江大学</td>
            <td>计算机科学与技术</td>
            <td>118</td>
            <td>185****4589</td>
            <td>荆州</td>
            <td></td>
        </tr>
        <tr>
            <td>20230126</td>
            <td>明轩</td>
            <td>男</td>
            <td>20</td>
            <td>湖北医药学院</td>
            <td>产品设计</td>
            <td>118</td>
            <td>185****5678</td>
            <td>孝感</td>
            <td></td>
        </tr>
        <tr>
            <td>20230127</td>
            <td>秋胜</td>
            <td>男</td>
            <td>21</td>
            <td>长江大学</td>
            <td>产品设计</td>
            <td>118</td>
            <td>185****4568</td>
            <td>荆州</td>
            <td></td>
        </tr>
        <tr>
            <td>20230128</td>
            <td>欣德</td>
            <td>男</td>
            <td>2</td>
            <td>江汉大学</td>
            <td>视觉传达设计</td>
            <td>118</td>
            <td>185****8935</td>
            <td>武汉</td>
            <td></td>
        </tr>
        <tr>
            <td>20230129</td>
            <td>梦柔</td>
            <td>女</td>
            <td>20</td>
            <td>武汉商学院</td>
            <td>计算机科学与技术</td>
            <td>118</td>
            <td>139****4596</td>
            <td>襄阳</td>
            <td></td>
        </tr>
        <tr>
            <td>20230130</td>
            <td>舒苒</td>
            <td>女</td>
            <td>23</td>
            <td>江汉大学</td>
            <td>视觉传达设计</td>
            <td>118</td>
            <td>139****4896</td>
            <td>武汉</td>
            <td>已毕业</td>
        </tr>
      </tbody>
    </table>
  </div>

  <div class="content2" style="display: none;">

    <select class="form-control names" id="select">
      <option>请选择地址</option>
      <option>富顺</option>
      <option>南充</option>
      <option>广元</option>
      <option>江安</option>
      <option>成都</option>
      <option>内江</option>
    </select>
    <table class="table table-striped table-bordered" id="table-2">
      <thead class="thead-dark">
        <tr>
          <th>姓名</th>
          <th>性别</th>
          <th>年龄</th>
          <th>电话</th>
          <th>地址</th>
        </tr>
      </thead>

      <tbody>

        <tr>
          <td>林兵</td>
          <td>男</td>
          <td>18</td>
          <td>12345678941</td>
          <td>富顺</td>
        </tr>
        <tr>
          <td>赖玉英</td>
          <td>女</td>
          <td>18</td>
          <td>12345678942</td>
          <td>南充</td>
        </tr>
        <tr>
          <td>潘旭</td>
          <td>女</td>
          <td>20</td>
          <td>12345678912</td>
          <td>富顺</td>
        </tr>
        <tr>
          <td>王威平</td>
          <td>男</td>
          <td>20</td>
          <td>97543152146</td>
          <td>广元</td>
        </tr>
        <tr>
          <td>李丹</td>
          <td>女</td>
          <td>30</td>
          <td>14725836910</td>
          <td>江安</td>
        </tr>
        <tr>
          <td>陈志樑</td>
          <td>男</td>
          <td>20</td>
          <td>31546287451</td>
          <td>富顺</td>
        </tr>
        <tr>
          <td>郭仕宏</td>
          <td>男</td>
          <td>20</td>
          <td>51240316845</td>
          <td>南充</td>
        </tr>
      </tbody>
    </table>
  </div>

  <div class="content3" style="display: none;">
    <input type="text" class="form-control names" id="searchInput" placeholder="请输入需要搜索的内容">

    <ul class="ul">
      <li>死亡如风，常伴吾身。</li>
      <li>蠢货是无药可治的！</li>
      <li>想杀我？你可以试试。</li>
      <li>死亡而已，没什么大不了的。</li>
      <li>速战速决！</li>
      <li>还是别出招了，反正是我赢。</li>
      <li>想独自平静一会吗？很快你就可以了。</li>
      <li>有些事绝对不会无趣。</li>
      <li>有些失误无法犯两次。 我不会怀着耻辱而死！</li>
      <li> 别再逃了。 我命由我，不由天。 一剑，一念。 还没到死的时候。</li>
      <li>长路漫漫 惟剑做伴 吾之荣耀 离别已久 宁日安在 无人能云 且随疾风前行 身后一许流星 此剑之势 愈斩愈烈 仁义道德</li>
    </ul>
  </div>

  <script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
  <script src="https://www.jq22.com/jquery/bootstrap-4.2.1.js"></script>
  <script src="../js/lin_search.js"></script>
  <script>
    //  表1


    $("#lin").on('keyup', function () {
      var table1 = $("#table-1");
      var input = $(this);
      new Search(table1, input,)

    })


    // 表2
    $('#select').on('change', function () {
      var content = $('#select') // 下拉框
      var table2 = $('#table-2')
      new Search(table2, content, '#6332f6')
    })

    // 搜索ul li
    $('#searchInput').on('keyup', function () {
      var content = $('.ul') // 
      var input = $(this)
      new Search(content, input, '#6332f6')
    })



  </script>




</body>

</html>